const canvas = document.querySelector('canvas');
const c=canvas.getContext('2d');

// 画布宽高设置
canvas.width = 1024;
canvas.height = 578;

c.fillRect(0, 0, canvas.width,canvas.height); // 绘制背景矩形


const gravity=0.7; // 重力加速度


const background=new sprite({
    position:{x:0,
    y:100
    
    },
    imagesrc:'../Game/img/environment/background-1.gif',
    width:1024,
    height:378,
    
});

const foreground=new sprite({
    position:{x:0,
    y:300
    
    },
    imagesrc:'../Game/img/environment/foreground-1.png',
    width:1024,
    height:278
    
});


const floor=new sprite({
    position:{x:0,
    y:470
    
    },
    imagesrc:'../Game/img/environment/floor-2.png',
    width:1024,
    height:110
    
    
});

const ceil=new sprite({
    position:{x:0,
    y:0
    
    },
    imagesrc:'../Game/img/environment/ceil-1.png',
    width:1024,
    height:100
    
    
});






const player =new fighter({
    position:{
    x:100,
    y:0
},
    velocity:{
        x:0,
        y:0
    },
    offset:{
        x:0,
        y:0
    },
    imagesrc:'../Game/img/player-1-1/left-kick-3.png',
    

})

const enemy =new fighter({
    position:{
    x:900,
    y:0
},
    velocity:{
        x:0,
        y:0
    },
    color:'green',
    offset:{
        x:-50,//让enemy的攻击盒子在角色的左侧

        y:0
    },
    imagesrc:'../Game/img/player-2-1/left-kick-5.png',
    
    
})



console.log(player);

// 定义角色移动的监听键盘事件
const keys={
    a:{
        pressed:false
    },
    d:{
        pressed:false
    },
    ArrowRight:{
        pressed:false
    },
    ArrowLeft:{
        pressed:false}
}

function rectangularCollision({rectangle1,rectangle2}){//矩形碰撞检测
    return(
        rectangle1.attackbox.position.x+rectangle1.attackbox.width>=rectangle2.position.x  &&//player的attackbox左侧+attackbox的宽度大于等于enemy左侧
        rectangle1.attackbox.position.x<=rectangle2.position.x+rectangle2.width  &&//player的attackbox左侧<=enemy的左侧+enemyy的宽度
        rectangle1.attackbox.position.y+rectangle1.attackbox.height>=rectangle2.position.y  &&//player的attackbox上侧+attackbox的高度大于等于enemy的上侧
        rectangle1.attackbox.position.y<=rectangle2.position.y+rectangle2.height  //player的attackbox上侧<=enemy的上侧+enemy的高度
    )
}

function determinewinner({player,enemy,timeoutid}){//判断游戏结束
        clearTimeout(timeoutid);//清除倒计时
        document.querySelector('#displaytext').style.display='flex';//显示游戏结束文字
        if (player.health === enemy.health) {
            document.querySelector('#displaytext').innerHTML = '平局';
            showAlertAndReload('平局');
        } else if (player.health > enemy.health) {
            document.querySelector('#displaytext').innerHTML = '玩家一胜';
            showAlertAndReload('玩家一胜');
        } else if (player.health < enemy.health) {
            document.querySelector('#displaytext').innerHTML = '玩家二胜';
            showAlertAndReload('玩家二胜');
        }
        
    }

    function showAlertAndReload(message) {
        
            
            window.location.replace('./top.html'); // 立即跳转到指定页面
            alert(message);
    }
    
    
    let timer=60;//倒计时定义
    let timeoutid
    function decreasetimer(){
        if(timer>0){//倒计时大于0
            timeoutid=setTimeout(decreasetimer,1000)//每秒调用一次倒计时减一
            timer--;
            document.querySelector('#timer').innerHTML=timer;
        }
        if(timer===0){//倒计时为0
            
            determinewinner({player,enemy,timeoutid})//游戏结束
        }
    }
    
    decreasetimer();
function animate(){
    window.requestAnimationFrame(animate);
    c.fillStyle='black'
    c.fillRect(0,0,canvas.width,canvas.height);
    
    ceil.update();
    floor.update();
    background.update();


    player.update();
    enemy.update();


    foreground.update();


    
    player.velocity.x=0;
    enemy.velocity.x=0;


    //player movement
    if(keys.a.pressed && player.lastkey ==='a'){
        player.velocity.x=-5;}
    else if(keys.d.pressed && player.lastkey ==='d'){
        player.velocity.x=5;}

    //enemy movement
    if(keys.ArrowRight.pressed && enemy.lastkey ==='ArrowRight'){
        enemy.velocity.x=5;}
    else if(keys.ArrowLeft.pressed && enemy.lastkey ==='ArrowLeft'){
        enemy.velocity.x=-5;}
    
    //检测碰撞
    if(//player攻击敌人
        rectangularCollision({
            rectangle1:player,
            rectangle2:enemy
        })&&
        player.isattacking//player正在攻击
    ){
        player.isattacking=false;//一次g键只会有一次返回true，可以获取准确血量
        //console.log('player attack enemy');//player攻击敌人
        enemy.health-=20;//减少enemy的血量
        document.querySelector('#enemyhealth').style.width=enemy.health+'%';//更新enemy血量
    }

    if(//enemy攻击玩家
        rectangularCollision({
            rectangle1:enemy,
            rectangle2:player
        })&&
        enemy.isattacking//enemy正在攻击
    ){
        enemy.isattacking=false;//一次l键只会有一次返回true，可以获取准确血量
        console.log('enemy attack player');//enemy攻击玩家
        player.health-=20;//减少player的血量
        document.querySelector('#playerhealth').style.width=player.health+'%';//更新player血量
    }
    //血量空游戏结束
    if(player.health<=0 || enemy.health<=0){
        determinewinner({player,enemy,timeoutid})
    }
    
}

animate();

//角色移动的监听键盘事件(按下键盘时，角色开始移动&停止移动)
window.addEventListener('keydown',(event)=>{
    //console.log(event.key);
    switch(event.key){
        //玩家移动
        case 'd':
            keys.d.pressed=true;
            player.lastkey='d';
            break;
        case 'a':
            keys.a.pressed=true;
            player.lastkey='a';
            break;
        case 'w':
            player.velocity.y=-20;
            break;
        // case's':
        //     player.velocity.y=10;
        //     break;
        //已有重力，可以不用监听s键
        //player的g键攻击
        case 'g':
            player.attack()
            break;

        //敌人移动
        case 'ArrowRight':
            keys.ArrowRight.pressed=true;
            enemy.lastkey='ArrowRight';
            break;
        case 'ArrowLeft':
            keys.ArrowLeft.pressed=true;
            enemy.lastkey='ArrowLeft';
            break;
        case 'ArrowUp':
            enemy.velocity.y=-20;
            
            break;
        // case 'ArrowDown':
        //     player.velocity.y=10;
        //     break;
        //已有重力，可以不用监听ArrowDown键

        case 'l':
            enemy.attack();
            break;
    }
    
})
window.addEventListener('keyup',(event)=>{
    switch(event.key){
        case 'd':
            keys.d.pressed=false;
            break;
        case 'a':
            keys.a.pressed=false;
            break;

            
    }

    //enemy key
    switch(event.key){
        case 'ArrowRight':
            keys.ArrowRight.pressed=false;
            break;
        case 'ArrowLeft':
            keys.ArrowLeft.pressed=false;
            break;
    }
    // console.log(event.key);
})



